// 导入 react 和 react-dom
import React from 'react'
// React18 写法，多了 /client
import ReactDOM from 'react-dom/client'

// 创建元素(虚拟DOM)
// React.createElement('标签名', 标签属性, 标签内容)
const title = React.createElement('h1', null, 'hello react') // <h1>hello react</h1>
console.log(title);

// 标签的 class 属性需要写成  className
const divNode = React.createElement(
  'div',
  { id: 'box', className: 'demo' },
  '这是一个react案例',
)
console.log(divNode);

const list = React.createElement(
  'ul',
  { className: 'list' },
  React.createElement('li', null, '香蕉'),
  React.createElement('li', null, '橘子'),
  React.createElement('li', null, '苹果'),
)
console.log(list);

// 渲染react元素，React18写法，先创建跟节点，再渲染
ReactDOM.createRoot(document.getElementById('root')).render(list)
